<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Footer 05 Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <footer>
        <div class="footer-wrapper">
            <div class="footer-columns">
                <section class="footer-logo-column">
                    <a href="/" aria-label="Go to GitHub homepage" class="footer-logo">
                        <svg height="30" aria-hidden="true" viewBox="0 0 45 16" version="1.1" width="84"
                            data-view-component="true">
                            <path
                                d="M8.81 7.35v5.74c0 .04-.01.11-.06.13 0 0-1.25.89-3.31.89-2.49 0-5.44-.78-5.44-5.92S2.58 1.99 5.1 2c2.18 0 3.06.49 3.2.58.04.05.06.09.06.14L7.94 4.5c0 .09-.09.2-.2.17-.36-.11-.9-.33-2.17-.33-1.47 0-3.05.42-3.05 3.73s1.5 3.7 2.58 3.7c.92 0 1.25-.11 1.25-.11v-2.3H4.88c-.11 0-.19-.08-.19-.17V7.35c0-.09.08-.17.19-.17h3.74c.11 0 .19.08.19.17Zm35.85 2.33c0 3.43-1.11 4.41-3.05 4.41-1.64 0-2.52-.83-2.52-.83s-.04.46-.09.52c-.03.06-.08.08-.14.08h-1.48c-.1 0-.19-.08-.19-.17l.02-11.11c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v3.77s.82-.53 2.02-.53l-.01-.02c1.2 0 2.97.45 2.97 3.88ZM27.68 2.43c.09 0 .17.08.17.17v11.11c0 .09-.08.17-.17.17h-2.13c-.09 0-.17-.08-.17-.17l.02-4.75h-3.31v4.75c0 .09-.08.17-.17.17h-2.13c-.08 0-.17-.08-.17-.17V2.6c0-.09.08-.17.17-.17h2.13c.09 0 .17.08.17.17v4.09h3.31V2.6c0-.09.08-.17.17-.17Zm8.26 3.64c.11 0 .19.08.19.17l-.02 7.47c0 .09-.06.17-.17.17H34.6c-.07 0-.14-.04-.16-.09-.03-.06-.08-.45-.08-.45s-1.13.77-2.52.77c-1.69 0-2.92-.55-2.92-2.75V6.25c0-.09.08-.17.17-.17h2.14c.09 0 .17.08.17.17V11c0 .75.22 1.09.97 1.09s1.3-.39 1.3-.39V6.26c0-.11.06-.19.17-.19Zm-17.406 5.971h.005a.177.177 0 0 1 .141.179v1.5c0 .07-.03.14-.09.16-.1.05-.74.22-1.27.22-1.16 0-2.86-.25-2.86-2.69V8.13h-1.11c-.09 0-.17-.08-.17-.19V6.58c0-.08.05-.15.13-.17.07-.01 1.16-.28 1.16-.28V3.96c0-.08.05-.13.14-.13h2.16c.09 0 .14.05.14.13v2.11h1.59c.08 0 .16.08.16.17v1.7c0 .11-.07.19-.16.19h-1.59v3.131c0 .47.27.83 1.05.83.247 0 .481-.049.574-.05ZM12.24 6.06c.09 0 .17.08.17.17v7.37c0 .18-.05.27-.25.27h-1.92c-.17 0-.3-.07-.3-.27V6.26c0-.11.08-.2.17-.2Zm29.99 3.78c0-1.81-.73-2.05-1.5-1.97-.6.04-1.08.34-1.08.34v3.52s.49.34 1.22.36c1.03.03 1.36-.34 1.36-2.25ZM11.19 2.68c.75 0 1.36.61 1.36 1.38 0 .77-.61 1.38-1.36 1.38-.77 0-1.38-.61-1.38-1.38 0-.77.61-1.38 1.38-1.38Zm7.34 9.35v.001l.01.01h-.001l-.005-.001v.001c-.009-.001-.015-.011-.024-.011Z">
                            </path>
                        </svg>
                    </a>
                    <div>
                        <h3>Subscribe to our developer newsletter</h3>
                        <p>Get tips, technical guides, and best practices. Once a month. Right in your inbox.</p>
                    </div>
                    <a class="subscribe-btn" href="https://resources.github.com/newsletter/">
                        Subscribe
                    </a>
                </section>
                <div class="other-columns">
                    <section>
                        <h3>Product</h3>
                        <ul>
                            <li>
                                <a href="#" title="Features">Features</a>
                            </li>
                            <li>
                                <a href="#" title="Enterprise">Enterprise</a>
                            </li>
                            <li>
                                <a href="#" title="Copilot">Copilot</a>
                            </li>
                            <li>
                                <a href="#" title="Security">Security</a>
                            </li>
                            <li>
                                <a href="#" title="Pricing">Pricing</a>
                            </li>
                            <li>
                                <a href="#" title="Team">Team</a>
                            </li>
                            <li>
                                <a href="#" title="Resources">Resources</a>
                            </li>
                            <li>
                                <a href="#" title="Roadmap">Roadmap</a>
                            </li>
                        </ul>
                    </section>
                    <section>
                        <h3>Resources</h3>
                        <ul>
                            <li>
                                <a href="#" title="Support">Support</a>
                            </li>
                            <li>
                                <a href="#" title="Sitemap">Sitemap</a>
                            </li>
                            <li>
                                <a href="#" title="Newsletter">Newsletter</a>
                            </li>
                            <li>
                                <a href="#" title="Help Centre">Help Centre</a>
                            </li>
                            <li>
                                <a href="#" title="Investor">Investor</a>
                            </li>
                        </ul>
                    </section>
                    <section>
                        <h3>Support</h3>
                        <ul>
                            <li>
                                <a href="#" title="About Us">Docs</a>
                            </li>
                            <li>
                                <a href="#" title="Blog">Community Forum</a>
                            </li>
                            <li>
                                <a href="#" title="Careers">Professional Services</a>
                            </li>
                            <li>
                                <a href="#" title="Press">Premium Support</a>
                            </li>
                            <li>
                                <a href="#" title="Contact">Skills</a>
                            </li>
                            <li>
                                <a href="#" title="Contact">Status</a>
                            </li>
                            <li>
                                <a href="#" title="Contact Github">Contact Github</a>
                            </li>
                        </ul>
                    </section>
                    <section>
                        <h3>Company</h3>
                        <ul>
                            <li>
                                <a href="#" title="Terms and services">
                                    About
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Privacy Policy">
                                    Customer Stories
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Cookies">
                                    Blog
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Licenses">
                                    Licenses
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Cookies">
                                    Contact
                                </a>
                            </li>
                        </ul>
                    </section>
                </div>
            </div>
        </div>
        <!-- bottom part section -->
        <div class="footer-bottom">
            <div class="footer-bottom-wrapper">
                <small>© <span id="year"></span> GitHub Inc.</small>
                <ul class="footer-bottom-links">
                    <li>
                        <a href="#" title="Terms">Terms</a>
                    </li>
                    <li>
                        <a href="#" title="Privacy">Privacy</a>
                    </li>
                    <li>
                        <a href="#" title="Security">Sitemap</a>
                    </li>
                    <li>
                        <a href="#" title="Security">What is Git?</a>
                    </li>
                </ul>
                <div class="social-wrapper">
                    <div class='social-links'>
                        <ul>
                            <li>
                                <a href="#" title="Facebook">
                                    <img src="assets/facebook.svg" alt='Facebook'>
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Instagram">
                                    <img src="assets/instagram.svg" alt='Instagram'>
                                </a></a>
                            </li>
                            <li>
                                <a href="#" title="Linkedin">
                                    <img src="assets/linkedin.svg" alt='Linkedin'>
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Twitter">
                                    <img src="assets/twitter.svg" alt='Twitter'>
                                </a>
                            </li>
                            <li>
                                <a href="#" title="Youtube">
                                    <img src="assets/youtube.svg" alt='YouTube'>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </footer>
    <script>
        document.getElementById("year").innerHTML = new Date().getFullYear();
    </script>
</body>

</html>